<template>
    <div class="content">
        <MonitorSearch @handle-btn="handleBtn" ref="risk-search" />
        <RiskTableP
            ref="risk-table"
            :tableConfig="tableConfig"
            :tableData="tableData"
            :column="tableColumns"
            :paging="paging"
            :searchParams="filterParams"
            @page-change="getTableData"
            class="table"
            :key="tableKey"
        >
            <template #entryName="scope">
                <span @click="handleRowClick(scope.row)" class="text-hover">
                    {{ scope.row.entryName }}
                </span>
            </template>
            <template #calculateValue="scope">
                <span
                    :style="{
                        textDecoration: 'underline',
                        textDecorationColor: ThresholadEntryColor[scope.row.thresholdType],
                        color: ThresholadEntryColor[scope.row.thresholdType],
                        cursor: 'pointer',
                    }"
                    @click="openEntryResultDetail(scope.row)"
                >
                    {{ numberFormat(scope.row.calculateValue) }}
                </span>
            </template>
            <template #moduleNames="scope">
                <el-popover
                    v-if="getObjectLength(scope.row.moduleNames) && getObjectLength(scope.row.moduleNames) > 1"
                    placement="right"
                    trigger="hover"
                    :visible-arrow="false"
                >
                    <div style="padding: 0 10px 10px 0" slot v-for="(ele, index) in scope.row.moduleNames" :key="index">
                        {{ ele }}
                    </div>
                    <el-tag slot="reference" style="background: #f1e9e2; color: #bf9181" size="small">
                        {{ getObjectLength(scope.row.moduleNames) + '个模块' }}
                    </el-tag>
                </el-popover>
                <span v-else-if="getObjectLength(scope.row.moduleNames)" v-for="(ele, index) in scope.row.moduleNames" :key="index">{{ ele }}</span>
                <span v-else> --</span>
            </template>
            <template #fundNames="scope">
                <el-popover
                    v-if="getObjectLength(scope.row.fundNames) && getObjectLength(scope.row.fundNames) > 1"
                    placement="right"
                    trigger="hover"
                    :visible-arrow="false"
                >
                    <div style="padding: 0 10px 10px 0" slot v-for="(ele, index) in scope.row.fundNames" :key="index">
                        {{ ele }}
                    </div>
                    <el-tag slot="reference" style="background: #f1e9e2; color: #bf9181" size="small">
                        {{ getObjectLength(scope.row.fundNames) + '个产品' }}
                    </el-tag>
                </el-popover>
                <span v-else-if="getObjectLength(scope.row.fundNames)" v-for="(ele, index) in scope.row.fundNames" :key="index">{{ ele }}</span>
                <span v-else>无</span>
            </template>
        </RiskTableP>
    </div>
</template>
<script lang="ts">
import RiskTableP from '@/common/components/risk-table-plus.vue';
import { PageVO, TableConfigVO } from '@/common/vo';
import { numberFormat } from '@/utils/tools';
import { Component, Vue } from 'vue-property-decorator';
import MonitorSearch from './monitor-search.vue';
import { getEntryResult } from './api/item-real-time-monitoring';
import RiskEmitter from '@/common/mixis/risk-emitter.vue';
import { mixins } from 'vue-class-component';
@Component({ name: 'ItemResult', components: { RiskTableP, MonitorSearch } })
export default class ItemResult extends mixins(RiskEmitter) {
    numberFormat = numberFormat;
    tableConfig: TableConfigVO = {
        rowKey: 'entryCode', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    tableData: any[] = [
        {
            entryCode: '80001X',
            entryName: '【现金管理产品运作管理指引】全部产品和货币基金投资同一商业银行的银行存款及其发行的同业存单与债券、已该金融机构为交易对手的逆',
            fundCode: '001',
            fundNames: ['招商证券产品1', '1招商证券产品1', '2招商证券产品1'],
            compareType: '0',
            thresholdValue: '0.89',
            calculateValue: 0.12,
            moduleNames: ['大集合产品项目', '大集合产品项目1', '大集合产品项目2'],
            thresholdType: '3',
        },
        {
            entryCode: '80001X',
            entryName: '【现金管理产品运作管理指引】全部产品和货币基金投资同一商业银行的银行存款及其发行的同业存单与债券、已该金融机构为交易对手的逆',
            fundCode: '002',
            fundNames: ['招商证券产品1'],
            compareType: '0',
            thresholdValue: '0.89',
            calculateValue: 0.12,
            moduleNames: ['大集合产品项目'],
            thresholdType: '3',
        },
        {
            entryCode: '80001X',
            entryName: '【现金管理产品运作管理指引】全部产品和货币基金投资同一商业银行的银行存款及其发行的同业存单与债券、已该金融机构为交易对手的逆',
            fundCode: '003',
            fundNames: ['招商证券产品1'],
            compareType: '0',
            thresholdValue: '0.89',
            calculateValue: 0.12,
            moduleNames: ['大集合产品项目'],
            thresholdType: '3',
        },
    ];
    tableColumns = [
        {
            title: '条目编号',
            field: 'entryCode',
            filterType: 'search',
            filters: [{ data: '' }],
        },
        {
            title: '条目名称',
            field: 'entryName',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: '40%',
        },
        {
            title: '所属模块',
            field: 'moduleNames',
        },
        {
            title: '触发阈值',
            field: 'thresholdValue',
            // render: (value, row) => this.CompareDirection[row.compareType] + '' + row.thresholdValue,
        },
        {
            title: '实际值',
            field: 'calculateValue',
        },
        {
            title: '超限产品',
            field: 'fundNames',
        },
    ];
    paging: PageVO = {
        currentPage: 1,
        pageSize: 25,
        total: 0,
    };

    // 符号字典
    private CompareDirection = {
        '0': '>',
        '1': '<',
        '2': '>=',
        '3': '<=',
        '4': '=',
        '5': '<>',
        '6': ' ',
    };

    // 颜色字典
    private ThresholadEntryColor = {
        '0': '#8bd197',
        '1': '#ff962c',
        '2': '#1d80ff',
        '3': '#df3a39',
        '4': '#6d5d5b',
    };

    filterParams: any = {};
    tableKey: number = 0; // 用于重置表头条件

    mounted() {
        this.getTableData();
    }

    getTableData(seatchBtn: boolean = false) {
        let params = JSON.parse(JSON.stringify((this.$refs as any)['risk-search'].searchParams));
        // 过滤-1
        params.moduleList = params.moduleList.filter(i => i !== '-1');

        getEntryResult({ ...params, ...this.filterParams, paging: this.paging }).then((res: any) => {
            this.tableData = res.list;
            this.paging.total = res.total;
            console.log(res, 'res');
            seatchBtn && this.yh_message_success('查询成功');
        });
    }

    /**
     * 查看明细
     */
    openEntryResultDetail(row: any) {
        let row1 = JSON.parse(JSON.stringify(row));
        delete row1.resultId;

        let currentEntryInfo = {
            entryCode: row.entryCode,
            fundCodes: row.fundCodes,
            row: row1,
        };
        this.dispatch('ItemRealTimeMonitoring', 'handleEntryDetail', currentEntryInfo);
    }

    /**
     * 按钮点击
     */
    async handleBtn(type: string) {
        if (type == 'search') {
            this.paging.currentPage = 1;
            this.getTableData(true);
        } else if (type == 'reset') {
            this.tableKey++;
            this.filterParams = {};
            this.handleBtn('search');
        }
    }

    /**
     *  获取对象长度
     */
    getObjectLength(obj: any) {
        if (obj) {
            return Object.keys(obj).length;
        } else {
            return 0;
        }
    }

    handleRowClick(row) {
        const msg = {
            type: 'look-entry-details',
            path: `/lookEntryDetails?entryCode=${row.entryCode}`,
            title: `条目详情-${row.entryCode}`,
        };
        top.window.postMessage(msg, '*');
    }
}
</script>
<style lang="scss" scoped>
.content {
    height: 100%;
    background: #f2f3f5;
    .table {
        height: calc(100% - 70px) !important;
        background: #fff;
    }
}

.text-hover {
    cursor: pointer;

    &:hover {
        color: var(--primary);
        text-decoration: var(--primary) solid underline;
    }
}
</style>
<style>
.el-popover {
    padding: 10px;
    max-height: 200px;
    overflow: auto;
    background: #333;
    color: #fff;
}
</style>
